<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社管理系统 - 工作区管理</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="workarea"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">工作区管理</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <button type="button" class="btn btn-primary" @click="showCreateModal">
                                <i class="bi bi-plus"></i> 新增工作区
                            </button>
                        </div>
                    </div>

                    <!-- 工作区列表 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>名称</th>
                                    <th>许可证号</th>
                                    <th>负责人</th>
                                    <th>联系电话</th>
                                    <th>PDF邮箱</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="workarea in workareas" :key="workarea.ID">
                                    <td>{{ workarea.ID }}</td>
                                    <td>{{ workarea.Name }}</td>
                                    <td>{{ workarea.LicenseNo }}</td>
                                    <td>{{ workarea.ManagerName }}</td>
                                    <td>{{ workarea.TelNo }}</td>
                                    <td>{{ workarea.PDFEmail }}</td>
                                    <td>{{ workarea.Memo }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary me-1" @click="showEditModal(workarea)">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-info" @click="showDetailModal(workarea)">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 新增/编辑工作区模态框 -->
                    <div class="modal fade" id="workareaModal" tabindex="-1" ref="workareaModal">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ isEditing ? '编辑工作区' : '新增工作区' }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <form @submit.prevent="handleSubmit">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">名称 *</label>
                                                <input type="text" class="form-control" v-model="form.Name" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">英文名称</label>
                                                <input type="text" class="form-control" v-model="form.EnglishName">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">许可证号</label>
                                                <input type="text" class="form-control" v-model="form.LicenseNo">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">负责人 *</label>
                                                <input type="text" class="form-control" v-model="form.ManagerName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">负责人用户名</label>
                                                <input type="text" class="form-control" v-model="form.ManagerUserNames">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">联系电话 *</label>
                                                <input type="text" class="form-control" v-model="form.TelNo" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">城市代码</label>
                                                <input type="text" class="form-control" v-model="form.CityCode">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">代理商等级</label>
                                                <input type="text" class="form-control" v-model="form.ResellerRank">
                                            </div>
                                            <div class="col-12 mb-3">
                                                <label class="form-label">地址</label>
                                                <input type="text" class="form-control" v-model="form.Address">
                                            </div>
                                            <div class="col-12 mb-3">
                                                <label class="form-label">备注</label>
                                                <textarea class="form-control" v-model="form.Memo" rows="3"></textarea>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF名称</label>
                                                <input type="text" class="form-control" v-model="form.PDFName">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF地址</label>
                                                <input type="text" class="form-control" v-model="form.PDFAddress">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF联系人</label>
                                                <input type="text" class="form-control" v-model="form.PDFContactName">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF电话</label>
                                                <input type="text" class="form-control" v-model="form.PDFTelNo">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF邮箱</label>
                                                <input type="email" class="form-control" v-model="form.PDFEmail">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="handleSubmit" :disabled="isSubmitting">
                                        {{ isSubmitting ? '保存中...' : '保存' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 工作区详情模态框 -->
                    <div class="modal fade" id="workareaDetailModal" tabindex="-1" ref="workareaDetailModal">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">工作区详情</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div v-if="selectedWorkarea">
                                        <p><strong>ID:</strong> {{ selectedWorkarea.ID }}</p>
                                        <p><strong>名称:</strong> {{ selectedWorkarea.Name }}</p>
                                        <p><strong>英文名称:</strong> {{ selectedWorkarea.EnglishName }}</p>
                                        <p><strong>许可证号:</strong> {{ selectedWorkarea.LicenseNo }}</p>
                                        <p><strong>负责人:</strong> {{ selectedWorkarea.ManagerName }}</p>
                                        <p><strong>负责人用户名:</strong> {{ selectedWorkarea.ManagerUserNames }}</p>
                                        <p><strong>联系电话:</strong> {{ selectedWorkarea.TelNo }}</p>
                                        <p><strong>城市代码:</strong> {{ selectedWorkarea.CityCode }}</p>
                                        <p><strong>地址:</strong> {{ selectedWorkarea.Address }}</p>
                                        <p><strong>代理商等级:</strong> {{ selectedWorkarea.ResellerRank }}</p>
                                        <p><strong>余额:</strong> {{ selectedWorkarea.Balance }}</p>
                                        <p><strong>备注:</strong> {{ selectedWorkarea.Memo }}</p>
                                        <p><strong>PDF名称:</strong> {{ selectedWorkarea.PDFName }}</p>
                                        <p><strong>PDF地址:</strong> {{ selectedWorkarea.PDFAddress }}</p>
                                        <p><strong>PDF联系人:</strong> {{ selectedWorkarea.PDFContactName }}</p>
                                        <p><strong>PDF电话:</strong> {{ selectedWorkarea.PDFTelNo }}</p>
                                        <p><strong>PDF邮箱:</strong> {{ selectedWorkarea.PDFEmail }}</p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                currentUser: null,
                workareas: [],
                isEditing: false,
                isSubmitting: false,
                form: {
                    Name: '',
                    ManagerName: '',
                    TelNo: '',
                    CityCode: '',
                    Address: '',
                    AllowedOfficeNos: '',
                    ResellerRank: 'A',
                    BillingType: 'prepaid',
                    BillingRate: 0,
                    ServiceFeeRate: 0,
                    Taxation: 0,
                    LockMachine: false,
                    LockIP: false
                },
                selectedWorkarea: null,
                modal: null,
                detailModal: null
            },
            created() {
                // 检查登录状态和权限
                const token = localStorage.getItem(window.API_CONFIG.TOKEN_KEY);
                if (!token) {
                    window.location.href = '/index.html';
                    return;
                }

                const userStr = localStorage.getItem(window.API_CONFIG.USER_KEY);
                if (userStr) {
                    this.currentUser = JSON.parse(userStr);
                    if (this.currentUser.role !== 'admin') {
                        window.location.href = '/dashboard.html';
                        return;
                    }
                }

                // 加载工作区列表
                this.loadWorkareas();
            },
            mounted() {
                this.modal = new bootstrap.Modal(this.$refs.workareaModal);
                this.detailModal = new bootstrap.Modal(this.$refs.workareaDetailModal);
            },
            methods: {
                async loadWorkareas() {
                    try {
                        const response = await window.apiClient.get('/workarea');
                        this.workareas = response.data;
                    } catch (error) {
                        console.error('加载工作区列表失败:', error);
                        alert('加载工作区列表失败');
                    }
                },
                showCreateModal() {
                    this.isEditing = false;
                    this.form = {
                        Name: '',
                        ManagerName: '',
                        TelNo: '',
                        CityCode: '',
                        Address: '',
                        AllowedOfficeNos: '',
                        ResellerRank: 'A',
                        BillingType: 'prepaid',
                        BillingRate: 0,
                        ServiceFeeRate: 0,
                        Taxation: 0,
                        LockMachine: false,
                        LockIP: false
                    };
                    this.modal.show();
                },
                showEditModal(workarea) {
                    this.isEditing = true;
                    this.form = { ...workarea };
                    this.modal.show();
                },
                showDetailModal(workarea) {
                    this.selectedWorkarea = workarea;
                    this.detailModal.show();
                },
                async handleSubmit() {
                    this.isSubmitting = true;
                    try {
                        if (this.isEditing) {
                            await window.apiClient.put(`/workarea/${this.form.ID}`, this.form);
                        } else {
                            await window.apiClient.post('/workarea', this.form);
                        }
                        this.modal.hide();
                        this.loadWorkareas();
                    } catch (error) {
                        console.error('保存工作区失败:', error);
                        alert('保存工作区失败');
                    } finally {
                        this.isSubmitting = false;
                    }
                },
                handleLogout() {
                    auth.logout();
                }
            }
        });
    </script>
</body>
</html> 